<style scoped>
  .rj-topbar {
    height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative
  }
  .list {
    background: #eee;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui_navbar_item {
    font-size: 14px;
  }
  .weui_navbar_item.weui_bar_item_on {
    color: #3cc51f;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .list {
    overflow: auto;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell.minpad{
    padding-right: 10px !important;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell.note{
    width: 100%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
    text-align: left;
  }
  .demos-content-padded {
    padding: 15px;
  }
  .attachimg {
    /*width: 100%;*/
  }
  .tipp {
    position: absolute;top: 0px;background: rgba(255,0,0,0.5);color:#fff;display: inline-block;width: 85px;text-align: center;
  }
  .rj-cell-child-tit {
    background: #f9f9f9;
    font-size: 14px;
    padding: 5px 15px;
    border-bottom: 1px solid #eee;
  }
  .tit label, .tit span {
    font-size: 16px;
  }
  .tit label {
    padding-right: 20px;
  }
  .weui-panel.weui-panel_access {
    padding-bottom: 10px;
  }
  .weui-panel__bd:not(.base) {
    width: 98%;
    padding: 0 1% 2px 1%;
  }
  .rj-cont-tit:not(.base) {
    border-radius: 5px;
  }
  .weui-cells_form {
    background: #fbfbfb;
  }
  .weui-cell {
    background: #fff;
  }
  .weui-cells__title {
    text-align: left;
    background: #eee;
  }
  .oitem {
    padding: 3px;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label {
    text-align: left;
  }

  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }
  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .weui_uploader_files {
    list-style: none;
  }
  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }
  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }
  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }
  .weui_uploader_bd {
    overflow: hidden;
  }
  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .weui-media-box {
    text-align: left;
  }
</style>
<template>
  <div class="viewpage">
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      报废单详情
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="../../assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd base" style="border-bottom: 2px solid #fff;">
        <div class="weui-form-preview billitem rj-cont-tit base">
          <div class="rj-cell max">
            <label>编号：</label>
            <span>{{scrap.code}}</span>
          </div>
          <div class="rj-cell max" v-if="scrap.planname != ''">
            <label>生产计划编号：</label>
            <span>{{scrap.planname}}</span>
          </div>
          <div class="rj-cell max">
            <label>货品所属公司：</label>
            <span>{{scrap.orgname}}</span>
          </div>
          <div class="rj-cell max" v-if="scrap.departname != ''">
            <label>班组：</label>
            <span>{{scrap.departname}}</span>
          </div>
          <div class="rj-cell max" v-if="scrap.pickcode != ''">
            <label>领料单编号：</label>
            <span>{{scrap.pickcode}}</span>
          </div>
          <div class="rj-cell max">
            <label>库房：</label>
            <span>{{scrap.strname}}</span>
          </div>
          <div class="rj-cell max">
            <label>类型：</label>
            <span>{{typename(scrap.type)}}</span>
          </div>
          <div class="rj-cell max">
            <label>总重量(吨)：</label>
            <span>{{scrap.weight}}</span>
          </div>
          <div class="rj-cell max" v-if="scrap.amount > 0">
            <label>总金额(元)：</label>
            <span>{{scrap.amount}}</span>
          </div>
          <div class="rj-cell max">
            <label>状态：</label>
            <span>{{statusname(scrap.status)}}</span>
          </div>
          <div class="rj-cell max">
            <label>报废原因：</label>
            <span>{{scrapwhy(scrap.scraptype)}}</span>
          </div>
          <div class="rj-cell max">
            <label>备注：</label>
            <span>{{scrap.remark}}</span>
          </div>
          <div class="rj-cell max">
            <label>创建日期：</label>
            <span>{{scrap.createtime}}</span>
          </div>
          <div class="rj-cell max">
            <label>提交人：</label>
            <span>{{scrap.operator}}</span>
          </div>
        </div>
        <div class="oitem" v-for="(product, index) in scrap.items" :key="product.guid">
          <div class="weui-cells__title">货品明细 {{index + 1}}</div>
          <div class="weui-cell fir">
            <div class="weui-cell__hd"><label class="weui-label">库间</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" readonly="true" :value="product.housename">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" readonly="true" :value="product.product">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">规格</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" readonly="true" :value="product.spename">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重量(吨)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number" readonly="true" :value="product.weight">
            </div>
          </div>
          <div class="weui-cell" v-if="product.amount > 0">
            <div class="weui-cell__hd"><label class="weui-label">金额(元)</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input weight" type="number" readonly="true" :value="product.amount">
            </div>
          </div>
        </div>
        <div class="weui-cells__title"  v-if="qaform != ''" style="height: 10px;line-height: 10px">质检信息</div>
        <div class="weui-panel__bd"   v-if="qaform != ''" ref="qaform">
          <div class="weui-form-preview billitem rj-cont-tit">

            <div    style="border-top: 1px solid #eee;">
              <div  >
                <div class="rj-cell max">
                  <label><span style="font-size: 14px;padding: 0;">质检单编号：</span></label>
                  <span>{{qaform.qacode}}</span>

                </div>
              </div>
              <div class="rj-cell max">
                <label>抽检数量：</label>
                <span>{{qaform.chkpknum}} 包</span>
                <span> {{qaform.chkwght}} Kg</span>

                <label>合格重量：</label>
                <span> {{qaform.okweight}} Kg</span>
              </div>
              <div class="rj-cell max">
                <label>不合格重量：</label>
                <span> {{qaform.notokweight}} Kg</span>
                <label>不合格率：</label>
                <span> {{qaform.unqualifiedchkrate}}%</span>
              </div>
              <div class="rj-cell max">
                <label>土杂重量：</label>
                <span> {{qaform.soilchkweight}} Kg</span>
                <label>土杂率：</label>
                <span> {{qaform.soilchkrate}}%</span>
              </div>

              <br>
              <div class="rj-cell max">
                <label>合格率：</label>
                <span> {{Number((100-qaform.deductrate)).toFixed(2)}} %</span>
              </div>

              <div class="rj-cell max">
                <label>质检人：</label>
                <span>{{qaform.operatorname}}</span>
                <label>质检时间：</label>
                <span>{{qaform.createdate}}</span>
              </div>
              <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="qaFormImg != undefined && qaFormImg.length > 0">
                <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">质检单照片</p>
                <div class="exp uploaderFiles" style="display: inline-block;">
                  <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in qaFormImg" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
                </div>
              </div>
            </div>
          </div>
        </div>


      </div>
      <OperationLogs :orderid="id"></OperationLogs>
      <!--      <div style="overflow:auto;overflow-x: hidden; background: #eee;" >-->
<!--        <div class="weui-cells__title">审批记录</div>-->
<!--        <div class="weui-form-preview" style="background: #eee;" v-for="(item, index) in scrap.optlogs">-->
<!--          <div class="weui-form-preview__bd">-->
<!--            <div class="weui-form-preview__item">-->
<!--              <label class="weui-form-preview__label rj-edit">审批意见</label><span class="weui-form-preview__value">{{item.description}}</span>-->
<!--            </div>-->
<!--            <div class="weui-form-preview__item">-->
<!--              <label class="weui-form-preview__label rj-edit">审批人</label><span class="weui-form-preview__value">{{item.operator}}</span>-->
<!--            </div>-->
<!--            <div class="weui-form-preview__item" style="padding-bottom: 10px;">-->
<!--              <label class="weui-form-preview__label rj-edit">审批时间</label><span class="weui-form-preview__value">{{item.createtime}}</span>-->
<!--            </div>-->
<!--            <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="item.imgs.length > 0">-->
<!--              <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">审批单据</p>-->
<!--              <div class="exp uploaderFiles" style="display: inline-block;">-->
<!--                <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in item.imgs" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
  import OperationLogs from '../common/OperationLogs'

  export default {
  name: 'ViewScrap',
  data () {
    return {
      openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
      userid: localStorage.userid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
      id: '',
      scrap: {},
      qaform:[],
      qaFormImg:[]

    }
  },
  components: {
    OperationLogs
  },
  created() {
    window.addEventListener('setItem', ()=> {
      this.openid = localStorage.getItem('openid');
      this.userid = localStorage.getItem('userid');
    })
  },
  mounted () {

    this.id = this.$route.query.id;
    this.getScrap(this.id);

    //图片浏览器
    $('.weui-panel').on('click', '.uploaderFiles .attachimg', function () {
      var num = $(this).parent().children().not( ".exp" ).length;
      var imgArr = [];
      for (var i=0; i<num; i++) {
        imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
      }
      var pnum = $(this).parent().find('.exp').length;
      var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
      var pb = $.photoBrowser({
        items: imgArr,
        initIndex: index
      });
      pb.open();
    });

  },
  methods: {
    scrapwhy: function(type) {
      if (type == 1) {
        return '腐烂报废';
      } else if (type == 2) {
        return '库损';
      } else {
        return '';
      }
    },
    typename: function(type) {
      let name = '';
      switch (type) {
        case 1:
          name = '成品报废';
          break;
        case 2:
          name = '原料报废';
          break;
        case 3:
          name = '生产报废';
          break;
        case 4:
          name = '次品报废';
          break;
      }
      return name;
    },
    statusname: function(status) {
      let name = '';
      switch (status) {
        case 1:
          name = '待质检';
          break;
        case 2:
          name = '内部审批';
          break;
        case 3:
          name = '品控审批';
          break;
        case 4:
          name = '待出库';
          break;
        case 5:
          name = '已出库';
          break;
      }
      return name;
    },
    getScrap: function (id) {
      this.axios({
        method: 'get',
        url: '/produce/Scrapapply!detail.action?openid=' + this.openid,
        params: {scrapapplyid: id}
      }).then(response => {
        if (response.data.msg == 'success') {
          let data = response.data;
          console.log(data);
          if(data.qaforms != undefined){
              this.qaform = data.qaforms;


              this.qaFormImg = data.qaFormImg;
          }
          this.scrap = data.apply;
        } else {
          this.toastError('系统错误');
        }
      });
    },
  }
}
</script>
